import 'package:flutter/material.dart';
import 'package:flutter_flux/flutter_flux.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:freemusic/model/netease/NeteaseAccount.dart';
import 'package:freemusic/model/netease/NeteaseDiss.dart';
import 'package:freemusic/page/songsheet/WYCloudDissSongs.dart';
import 'package:freemusic/services/GedanServices.dart';
import 'package:freemusic/stores/CloudDissStores.dart';
import 'package:freemusic/utils/Util.dart';

class WYCloudSongSheet extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return WYCloudSongSheetState();
  }
}

class WYCloudSongSheetState extends State<WYCloudSongSheet>
    with StoreWatcherMixin<WYCloudSongSheet> {
  CloudDissStore _cloudDissStore;
  String account;
  String password;

  @override
  void initState() {
    super.initState();
    _cloudDissStore = listenToStore(cloudDissToken);
  }

  void _handleSearchOnPressed() {
    String account = this.account;
    String password = this.password;
    if (account == null || account.trim().isEmpty) {
      Fluttertoast.showToast(msg: "账户不能为空");
      return;
    }
    if (password == null || account.trim().isEmpty) {
      Fluttertoast.showToast(msg: "密码不能为空");
    }
    GedanServices.getInstace().getNeteaseDiss(account, password);
  }

  Widget _renderTitle() {
    NeteaseAccount account = _cloudDissStore.neteaseAccount;
    Color themeColor = Util.themeColor;
    if (account == null) {
      return Container(
        padding: EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                height: 34,
                margin: EdgeInsets.only(right: 8),
                child: TextField(
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    hintText: "网易云音乐账号",
                    fillColor: Colors.white,
                    filled: true,
                    contentPadding: EdgeInsets.only(left: 5.0, right: 5.0),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(16.0),
                      borderSide: BorderSide(width: 1),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(16.0),
                      borderSide: BorderSide(width: 1, color: themeColor),
                    ),
                  ),
                  onChanged: (value) {
                    this.setState(() {
                      this.account = value;
                    });
                  },
                ),
              ),
            ),
            Expanded(
              child: Container(
                height: 34,
                margin: EdgeInsets.only(left: 8),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    hintText: "网易云音乐密码",
                    fillColor: Colors.white,
                    filled: true,
                    contentPadding: EdgeInsets.only(left: 5.0, right: 5.0),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(16.0),
                      borderSide: BorderSide(width: 1),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(16.0),
                      borderSide: BorderSide(width: 1, color: themeColor),
                    ),
                  ),
                  onChanged: (value) {
                    this.setState(() {
                      this.password = value;
                    });
                  },
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 8),
              child: IconButton(
                icon: Image.asset(
                  "images/search.png",
                ),
                onPressed: this._handleSearchOnPressed,
              ),
            ),
          ],
        ),
      );
    }

    return Container(
      padding: EdgeInsets.only(top: 8, bottom: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(30)),
                child: Image.network(
                  account.avatarUrl,
                  width: 60,
                ),
              ),
              Container(
                padding: EdgeInsets.only(left: 8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("${account.nickname}"),
                    Text("${account.account}"),
                  ],
                ),
              )
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 12),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Column(
                  children: <Widget>[Text("${account.follows}"), Text("关注")],
                ),
                Column(
                  children: <Widget>[
                    Text("${account.playlistCount}"),
                    Text("歌单")
                  ],
                ),
                Column(
                  children: <Widget>[Text("${account.follows}"), Text("访客")],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    List<NeteaseDiss> disses = _cloudDissStore.neteaseDisses;
    return Container(
      padding: EdgeInsets.only(
        left: 8,
      ),
      child: Column(
        children: <Widget>[
          this._renderTitle(),
          Expanded(
            child: Listener(
              onPointerDown: (e) {
                FocusScope.of(context).unfocus();
              },
              child: ListView.builder(
                itemCount: disses.length,
                itemBuilder: (context, index) {
                  return _NeteaseDiss(
                    diss: disses[index],
                  );
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

class _NeteaseDiss extends StatelessWidget {
  final String qq;
  final NeteaseDiss diss;
  final double _size = 50.0;

  const _NeteaseDiss({Key key, this.diss, this.qq}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        GedanServices.getInstace().getNeteaseDissSongs(diss.id);
        Navigator.push(context,
                        MaterialPageRoute(builder: (context) => WYCloudDissSongs()));
      },
      child: Container(
        height: 68,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(
                left: 4.0,
                right: 10.0,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12.0),
                child: diss.coverImgUrl == null || diss.coverImgUrl.isEmpty
                    ? Image.asset(
                        "images/sheet.png",
                        width: _size,
                      )
                    : FadeInImage.assetNetwork(
                        placeholder: "images/sheet.png",
                        image: diss.coverImgUrl,
                        width: _size,
                      ),
              ),
            ),
            Expanded(
              child: Column(
                children: <Widget>[
                  Text(
                    diss.name,
                    style: TextStyle(fontSize: 16),
                  ),
                  Text(
                    "${diss.trackCount}首    ${diss.playCount}次播放",
                    style: TextStyle(fontSize: 12, color: Util.wordColor),
                  ),
                ],
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
              ),
            ),
            Icon(
              Icons.keyboard_arrow_right,
              color: Util.toolBarColor,
            ),
          ],
        ),
      ),
    );
  }
}
